var WorldInterface = function(ctx){
    this.pattern;
    this.actions;
    this.drawable = null;
    this.display = false;
    this.actionButtons = new Array();

    this.stack = new Array();
    this.displayRect = {x : 0, y : 0, width : 500, height : 500};



    var self = this;
    var imageObj = new Image();
    imageObj.onload = function() {
        self.pattern = ctx.createPattern(imageObj, 'no-repeat');
    };
    imageObj.src = "/images/cloud-infos_500.png";

}

WorldInterface.prototype = {

    displayDrawable : function(drawer){

        var ctx = drawer.engine.context;


        if (this.drawable == undefined)
            this.dismiss();

        ctx.save();

        // Show image
        //this.drawRect(ctx,0,0,500,500,3,'blue','#8AB5ED',0.8);
        this.drawImgRect(ctx,this.displayRect.x,this.displayRect.y,this.displayRect.width,this.displayRect.height,this.pattern);
        if (this.drawable.isShape){ //only rectangle supported
            this.drawRect(ctx,(200 - this.drawable.width)/2, (200 - this.drawable.height)/2, this.drawable.width,
                this.drawable.height,0.4,'red',this.drawable.color,1);
        }else{
            if (!this.drawable.isAnimated)
                ctx.drawImage(this.drawable.getImage(), (200 - this.drawable.width)/2,
                    (200 - this.drawable.height)/2, this.drawable.width, this.drawable.height);
            else{
                var cuttingInfo = this.drawable.getCuttingInfo();
                ctx.drawImage(this.drawable.getImage(), cuttingInfo.from,cuttingInfo.to,cuttingInfo.width,
                    cuttingInfo.height,(200 - this.drawable.width)/2, (200 - this.drawable.height)/2,
                    this.drawable.width, this.drawable.height);
            }
        }

        // Show info

        this.showFillText(ctx,this.drawable.name,320,50,"#7EDAEF","22pt Calibri","","center");
        var infos = this.drawable.getInfos();
        var y = 80;
        for(var index in infos){
            this.showFillText(ctx,index + " : " + infos[index],300,y,"#7EDAEF","15pt Calibri","","center");
            y +=20;
        }



        var width = 50;
        var heigh = 50;
        var margin = 30;
        var y = 250;

        var postions = this.getSimpleDimentions(300,50,30); // Only width is considered
        var x = postions.startX + 100;


        var doneForLine = 0;

        // add back button if any
        if (this.stack.length > 0){

            console.log('back');
            var backAction = {x: 50, y : 250, width : 20, heigh: 20, action : { name : "close", shownName : false,do : function(d,w) {
                w.restore();
            },
                drawButton : function(ctx,wi,actionButton){
                    ctx.beginPath();
                    ctx.moveTo(actionButton.x + actionButton.width, actionButton.y);
                    ctx.lineTo(actionButton.x, actionButton.y + actionButton.heigh/2);
                    ctx.lineTo(actionButton.x + actionButton.width, actionButton.y + actionButton.heigh);
                    ctx.stroke();
                }
            }
            };

            this.actionButtons.push(backAction);

        }

        var closeAction = {x: 400, y : 50, width : 20, heigh: 20, action : { name : "close", shownName : false,do : function(d,w) {
                        w.dismiss();
                    },
                    drawButton : function(ctx,wi,actionButton){
                        ctx.beginPath();
                        ctx.strokeStyle = "red";
                        ctx.moveTo(actionButton.x, actionButton.y);
                        ctx.lineTo(actionButton.x + actionButton.width, actionButton.y + actionButton.heigh);
                        ctx.moveTo(actionButton.x, actionButton.y + actionButton.heigh);
                        ctx.lineTo(actionButton.x + actionButton.width, actionButton.y);
                        ctx.stroke();
                    }
                }
        };
        this.actionButtons.push(closeAction);

        if (this.actions != null){
            for(index in this.actions){

                var buttonAction = {x: x, y : y, width : width, heigh: heigh, action : this.actions[index]}
                this.actionButtons.push(buttonAction);

                doneForLine++;
                x += width + margin;

                if (doneForLine >= postions.perLine){
                    doneForLine = 0;
                    x = postions.startX + 100;
                    y += heigh + margin;
                }

            }

            for(index in this.actionButtons){

                if (this.actionButtons[index].action.drawButton == undefined){
                    this.drawRect(ctx,this.actionButtons[index].x,
                        this.actionButtons[index].y,this.actionButtons[index].width,this.actionButtons[index].heigh,1,"gray","darkgray",0.8);

                    if (this.actionButtons[index].action.shownName)
                        this.showFillText(ctx,this.actionButtons[index].action.name,
                            this.actionButtons[index].x + this.actionButtons[index].width/2, this.actionButtons[index].y - 10,"#7EDAEF","15pt Calibri","","center");
                }else{
                    this.actionButtons[index].action.drawButton(ctx,this,this.actionButtons[index]);
                }
            }
        }


        ctx.restore();

    },

    show : function(drawable,actions,keepStack){

        if (keepStack == undefined)
            keepStack = false;

        if (this.display)
            this.dismiss(keepStack);

        this.actions = actions;
        this.drawable = drawable;
        this.display = true;


    },

    hasSelected : function(){
        return this.display;
    },

    getSimpleDimentions : function(width,pW,mW){

        var perLine = Math.floor(width /(pW + mW));
        var startX =  Math.floor((width - perLine * (pW + mW))  / 2);

        return { perLine : perLine, startX : startX};

    },

    showFillText : function (ctx,t,x,y,s,f,b,a) {
        ctx.fillStyle = s;
        ctx.font = f;
        ctx.textBaseline = b;
        ctx.textAlign = a;
        ctx.fillText(t, x, y);
    },

    drawRect : function(ctx,x,y,w,h,lw,ls,fs,a){
        ctx.lineWidth = lw;
        ctx.globalAlpha = a;
        ctx.strokeStyle = ls;
        ctx.beginPath();
        ctx.rect(x,y,w,h);
        ctx.fillStyle = fs;
        ctx.fill();
        ctx.stroke();
    },
    drawImgRect : function(ctx,x,y,w,h,p){
        ctx.rect(x, y, w, h);
        ctx.fillStyle = p;
        ctx.fill();
    },

    handleClick : function(coor){

        console.log(coor);
        if(!this.hasSelected())
            return

        for(var index in this.actionButtons){
            if (coor.u >= this.actionButtons[index].x && coor.u <=
                this.actionButtons[index].x + this.actionButtons[index].width &&
                coor.v >= this.actionButtons[index].y && coor.v <=
                this.actionButtons[index].y + this.actionButtons[index].heigh){

                console.log(this.actionButtons[index].action.name);
                this.actionButtons[index].action.do(this.drawable,this);
                return;

            }
        }
    },

    save : function(){

        this.stack.push({

            actions : this.actions,
            actionButtons : this.actionButtons,
            displayRect : this.displayRect,
            drawable : this.drawable


        });

    },

    restore : function(){

        var old = this.stack.pop();
        this.actions = old.actions;
        this.actionButtons = old.actionButtons;
        this.displayRect = old.displayRect;
        this.drawable = old.drawable;

    },

    dismiss : function(keepStack){

        if (keepStack == undefined)
            keepStack = false;

        if (!keepStack)
            this.stack = [];

        this.actions = null;
        this.drawable = null;
        this.actionButtons = [];
        //TODO
        this.displayRect  = {x : 0, y : 0, width : 500, height : 500};
        this.display = false;

    }

}
